<template>
	<view>
		<view class="OrderCancellation">
			<view class="header"></view>
			<view class="whiteBg">
				<view class="input">
					<input type="number" placeholder="0" v-model="verify_code" />
				</view>
				<view class="bnt" @click="codeChange">立即核销</view>
			</view>
			<!-- #ifdef MP || MP-WEIXIN -->
			<view class="scan" @click="scanCode">
				<image src="../static/scan.gif"></image>
			</view>
			<!-- #endif -->
		</view>
		<view v-if="iShidden">
			<view class="WriteOff">
				<view class="pictrue">
					<image :src="orderInfo.image" />
				</view>
				<view class="num acea-row row-center-wrapper">
					<text>{{ orderInfo.order_id }}</text>
					<view class="views" @click='goOrderDetails(orderInfo.order_id)'>查看<text class='iconfont icon-jiantou views-jian'></text></view>
				</view>
				<view class="tip">确定要核销此订单吗？</view>
				<view class="sure" @click="confirm">确定核销</view>
				<view class="sure cancel" @click="cancel">取消</view>
			</view>
			<view class="mask"></view>
		</view>
		<home></home>
	</view>
</template>

<script>
	import {
		orderVerific
	} from "@/api/admin";
	import home from '@/components/home';
	export default {
		components:{
			home
		},
		data() {
			return {
				iShidden: false,
				verify_code: '',
				iShidden: false
			}
		},
		methods: {
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(id) {
				uni.navigateTo({
					url: '/pages/admin/order_details/index?id=' + id + '&goname=look'
				});
			},
			// 立即核销
			codeChange: function() {
				let self = this
				let ref = /[0-9]{12}/;
				if (!this.verify_code) return self.$util.Tips({
					title: '请输入核销码'
				});
				if (!ref.test(this.verify_code)) return self.$util.Tips({
					title: '请输入正确的核销码'
				});
				self.$util.Tips({
					title: '查询中'
				});
				setTimeout(() => {
					orderVerific(this.verify_code, 0)
						.then(res => {
							self.orderInfo = res.data
							self.iShidden = true
						})
						.catch(res => {
							self.verify_code = ''
							return self.$util.Tips({
								title: res
							});
						});
				}, 800);
			},
			// 扫码核
			scanCode() {
				var self = this;
				// #ifdef MP
				wx.scanCode({
					scanType: ["qrCode", "barCode"],
					success(res) {
						self.verify_code = res.result
						self.codeChange();
					},
					fail(res) {
						console.log(res);
					},
				})
				// #endif
				//#ifdef H5
				if(this.$wechat.isWeixin()){
					this.$wechat.wechatEvevt('scanQRCode',{
						needResult: 1,
						scanType: ["qrCode", "barCode"]
					}).then(res=>{
						this.verify_code = res.result
						this.codeChange();
					});
				}
				//#endif

			},
		
			/**
			 * 确定销码
			 */
			confirm: function() {
				let self = this
				orderVerific(this.data.verify_code, 1)
					.then(res => {
						this.setData({
							verify_code: '',
							iShidden: false
						});
						self.verify_code = ''
						self.iShidden = false
						self.$util.Tips({
							title: res
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 取消
			 */
			cancel: function() {
				this.iShidden = false
			}
		}
	}
</script>

<style>
	.OrderCancellation .header {
		background-image: url('');
		width: 100%;
		height: 300rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.OrderCancellation {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.OrderCancellation .whiteBg {
		width: 90%;
		background-color: #fff;
		margin: -93rpx auto;
		padding-top: 80rpx;
		border-radius: 6rpx 0;
	}

	.OrderCancellation .whiteBg .input {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #eee;
	}

	.OrderCancellation .whiteBg .input input {
		font-size: 60rpx;
		color: #282828;
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx
	}

	.OrderCancellation .whiteBg .bnt {
		font-size: 32rpx;
		color: #fff;
		width: 80%;
		height: 86rpx;
		border-radius: 43rpx;
		background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		text-align: center;
		line-height: 86rpx;
		margin: 55rpx auto 0 auto;
	}

	.OrderCancellation .scan {
		width: 300rpx;
		height: 300rpx;
		margin: 160rpx auto 0 auto;
	}

	.OrderCancellation .scan image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.WriteOff {
		width: 560rpx;
		height: 800rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -400rpx;
		margin-left: -280rpx;
		z-index: 99;
		padding-top: 55rpx;
	}

	.WriteOff .pictrue {
		width: 340rpx;
		height: 340rpx;
		margin: 0 auto;
	}

	.WriteOff .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 10rpx;
	}

	.WriteOff .num {
		font-size: 30rpx;
		color: #666;
		margin: 28rpx 0 30rpx 0;
	}

	.WriteOff .num .see {
		font-size: 16rpx;
		color: #fff;
		border-radius: 4rpx;
		background-color: #c68937;
		padding-left: 5rpx;
		margin-left: 12rpx;
	}

	.WriteOff .num .see .iconfont {
		font-size: 15rpx;
	}

	.WriteOff .tip {
		font-size: 36rpx;
		color: #282828;
		text-align: center;
		border-top: 1px dashed #ccc;
		padding-top: 40rpx;
		position: relative;
	}

	.WriteOff .tip:after {
		content: "";
		position: absolute;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #7f7f7f;
		right: -12.5rpx;
		top: -12.5rpx;
	}

	.WriteOff .tip:before {
		content: "";
		position: absolute;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #7f7f7f;
		left: -12.5rpx;
		top: -12.5rpx;
	}

	.WriteOff .sure {
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 82rpx;
		height: 82rpx;
		width: 460rpx;
		border-radius: 41rpx;
		margin: 40rpx auto 0 auto;
		background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
	}

	.WriteOff .sure.cancel {
		background-image: none;
		color: #999;
		margin-top: 10rpx;
	}

	.views {
		font-size: 18rpx;
		background: #C68937;
		border-radius: 4px;
		color: #fff;
		padding: 5rpx 2rpx 5rpx 8rpx;
		margin-left: 10rpx;
	}

	.views-jian {
		font-size: 10px;
	}
</style>
